<template>
  <div>
    <div id="word_cloud"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      const echartDom=document.getElementById('word_cloud')
      const myChart=echarts.init(echartDom)
     
      const option={
        series: [{
          type: 'wordCloud',
          sizeRange: [15,80],
          rotationRange: [0,90],
          rotationStep: 45,
          shape: 'pentagon',
          gridSize: 2,
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            fontFamily: 'sans-serif',
            color: function() {
              return 'rgb('+[
                Math.round(Math.random()*160),
                Math.round(Math.random()*160),
                Math.round(Math.random()*160)
              ].join(',')+')';
            }
          },
          emphasis: {
            textStyle: {
              textShadowBlur: 3,
              textShadowColor: '#333'
            }
          },
          //data属性中的value值却大，权重就却大，展示字体就却大
          data: [
            { name: "景点",value: 900 },
            { name: "值得",value: 888 },
            { name: "不错",value: 800 },
            { name: "长江",value: 700 },
            { name: "建筑",value: 720 },
            { name: "古建筑",value: 666 },
            { name: "长江大桥",value: 400 },
            { name: "风景",value: 420 },
            { name: "黄鹤楼",value: 560 },
            { name: "方便",value: 500 },
            { name: "历史",value: 300 },
            { name: "看看",value: 400 },
            { name: "挺好",value: 466 },
            { name: "武汉",value: 320 },
            { name: "好美",value: 530 }
          ]
        }]
      }

      option&&myChart.setOption(option)


    }
  }
}
</script>

<style lang="scss" scoped>
#word_cloud {
  height: 280px;
  width: 500px;
}
</style>